<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style type="text/css">
      .grid {
        margin: auto;
        width: 530px;
        text-align: center;
      }

      .grid table {
        border-top: 1px solid #c2d89a;
        width: 100%;
        border-collapse: collapse;
      }

      .grid th,
      td {
        padding: 10;
        border: 1px dashed #f3dcab;
        height: 35px;
        line-height: 35px;
      }

      .grid th {
        background-color: #f3dcab;
      }

      .grid .book {
        padding-bottom: 10px;
        padding-top: 5px;
        background-color: #f3dcab;
      }
    </style>
  </head>

  <body>
    <div id="app">
      <div class="grid">
        <div>
          <h1>图书管理</h1>
          <div class="book">
            <div>
              <label for="id"> 编号： </label>
              <input type="text" id="id" v-model="formData.id" disabled />
              <label for="name"> 名称： </label>
              <input type="text" id="name" v-model.trim="formData.name" @keyup.enter="onSubmit" />
              <button @click="onSubmit">提交</button>
            </div>
            <div style="border-top: 1px solid #c2d89a; margin-top: 10px; padding-top: 10px">
              图书总数：{{ totalCount }}
            </div>
          </div>
        </div>
        <table>
          <thead>
            <tr>
              <th>编号</th>
              <th>名称</th>
              <th>时间</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="v in books" :key="v.id">
              <td>{{ v.id }}</td>
              <td>{{ v.name }}</td>
              <td>{{ v.date | df('YYYY-MM-DD HH:mm:ss') }}</td>
              <td>
                <a href="" @click.prevent="edit(v)">修改</a>
                &nbsp;|&nbsp;
                <a href="" @click.prevent="del(v.id)">删除</a>
              </td>
            </tr>
            <tr v-show="isLoading">
              <td colspan="4">数据加载中...</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <!-- 单位件组件：   *.vue    -->
    <script type="text/javascript" src="../vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.4.1/dayjs.min.js"></script>
    <script type="text/javascript">
      // 用来记录下一个id
      let nextId = 1;

      // 定义时间格式化的过滤器
      Vue.filter('df', (data, pattern) => dayjs(new Date(data)).format(pattern));

      /*
      图书管理-添加图书
      */
      var vm = new Vue({
        el: '#app',
        data: {
          // 记录当前的提交行为  add:添加, edit:修改
          submitAction: 'add',
          // 用来标识是否正在加载，ture：是, false：否
          isLoading: false,
          formData: {
            id: '',
            name: '',
          },
          books: [],
        },
        computed: {
          totalCount() {
            return this.books.length;
          },
        },
        methods: {
          edit(book) {
            this.submitAction = 'edit';
            this.formData.id = book.id;
            this.formData.name = book.name;
          },
          del(id) {
            // 如果要删除的id为正在修改的图书id，那么就不能删除
            if (id === this.formData.id) {
              return alert('不能删除正在修改中的图书');
            }

            // 删除方案一（先找到索引号，在通过splice删除）：
            // const index = this.books.findIndex((v) => v.id === id);
            // this.books.splice(index, 1);
            // 删除方案二（直接用filter过滤出来）：
            //   filter 函数内部也会循环调用传进去的这个回调函数
            //      如果循环调用时，某一次的返回值为 true，则将该元素添加到新数组中
            //      如果循环调用时，某一次的返回值为 false，则跳过该元素，不添加到新数组中
            //      整个循环完，最终返回新数组
            this.books = this.books.filter((v) => v.id !== id);
          },
          onSubmit() {
            // 展开表达式，将this.formData对象中的键值对都拿出来，方法这个新对象中
            var book = { ...this.formData, date: Date.now() };
            if (book.name === '') {
              return alert('图书名称不能为空');
            }
            // 在添加到数组中之前，先要判断该图书名称是否已存在
            //   some 函数接收的这个 回调函数 会在 some 函数内部循环调用
            //     如果循环调用时，某一次的返回值为 true，则终止循环，some 函数也返回 true，即为找到了
            //     如果循环调用时，某一次的返回值为 false，则进行下一个元素的循环调用
            //     如果循环完了，都返回false，则 some 函数也返回 false，即为没有找到
            if (this.books.some((v) => v.name === book.name)) {
              return alert('该图书已存在，请换个名称试试！');
            }

            // 添加
            if (this.submitAction === 'add') {
              book.id = nextId;
              this.books.push(book);
              nextId++; // 必须数据校验合法后，正常添加的数组中后，id 才能 ++
            }
            // 修改
            else {
              // 先从数组中找出这条旧的记录
              const oldBook = this.books.find((v) => v.id === book.id);
              // 更新旧的记录
              oldBook.name = book.name;
              this.submitAction = 'add';
            }

            // 不管添加还是修改，完成后，都要重置表单
            this.formData.id = '';
            this.formData.name = '';
          },
        },
        created() {
          // 模拟ajax发请求
          this.isLoading = true; // 标记为加载中
          setTimeout(() => {
            // 箭头函数中的this指向上一级作用域中的this
            this.books = [
              {
                id: 1,
                name: '三国演义',
                date: Date.now(),
              },
              {
                id: 2,
                name: '水浒传',
                date: Date.now(),
              },
              {
                id: 3,
                name: '红楼梦',
                date: Date.now(),
              },
              {
                id: 4,
                name: '西游记',
                date: Date.now(),
              },
            ];
            nextId = this.books.length + 1;

            this.isLoading = false; // 标记为已加载完成
          }, 300);
        },
      });
    </script>
  </body>
</html>
